<template>
  <div class="login">
    <div class="login-logo"><img src="@/assets/djlogo.png" />鼎捷MES</div>
    <div class="login-advert">
      <a-carousel class="login-advert-carousel" indicator-type="dot" show-arrow="hover" animation-name="fade">
        <a-carousel-item v-for="(image, index) in images" :key="index" class="login-advert-carousel-item">
          <div class="login-advert-carousel-item-title">我是广告{{ index }}</div>
          <div class="login-advert-carousel-item-subTitle">我是副标题{{ index }}</div>
          <img :src="image" class="login-advert-carousel-item-image" />
        </a-carousel-item>
      </a-carousel>
    </div>
    <div class="login-content">
      <div class="login-content-wrapper">
        <div class="login-content-wrapper-title">登入</div>
        <div class="login-content-wrapper-subTitle">副标题</div>
        <a-form ref="formRef" :model="form" :rules="formRules" @submit="handleSubmit">
          <a-form-item field="userId" hide-label :validate-trigger="['blur']">
            <a-input v-model="form.userId" placeholder="用户名">
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item field="password" hide-label :validate-trigger="['blur']">
            <a-input v-model="form.password" placeholder="密码" :type="eyeOpen ? 'password' : 'text'">
              <template #prefix>
                <icon-lock />
              </template>
              <template #suffix>
                <span class="login-content-wrapper-showEye" @click="changeEye">
                  <icon-eye v-if="eyeOpen" />
                  <icon-eye-invisible v-else />
                </span>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item hide-label>
            <a-row type="flex" align="space-between" style="width: 100%">
              <a-col :span="12">
                <div>
                  <a-checkbox v-model="isRemember">记住密码</a-checkbox>
                </div>
              </a-col>
              <a-col :span="12">
                <div class="login-content-wrapper-forgetPsw" @click="forgetPsw">忘记密码</div>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item hide-label>
            <a-button type="primary" class="login-content-wrapper-login" @click="login">登录</a-button>
          </a-form-item>
          <a-form-item hide-label>
            <a-button class="login-content-wrapper-register" @click="register">注册账号</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="login-content-footer">底部</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue';
import importConfig from './login.ts';

export default defineComponent({
  name: 'LoginDOM',
  setup() {
    const { base, images, form, formRules, changeEye, login, register, forgetPsw, handleSubmit } = importConfig();

    return {
      ...toRefs(base),
      images,
      form,
      formRules,
      changeEye,
      login,
      register,
      forgetPsw,
      handleSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
.login {
  display: flex;
  height: 100vh;
  position: relative;

  &-logo {
    position: absolute;
    left: 20px;
    top: 20px;
    color: white;
  }

  &-advert {
    width: 25%;
    background-color: #1d2129;
    background-image: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
    color: white;

    &-carousel {
      width: 100%;
      height: 100%;

      &-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &-title {
          margin-bottom: 5px;
        }

        &-subTitle {
          margin-bottom: 15px;
        }

        &-image {
          width: 100%;
        }
      }
    }
  }

  &-content {
    width: 75%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    &-wrapper {
      width: 320px;

      &-title {
        margin-bottom: 5px;
      }

      &-subTitle {
        margin-bottom: 15px;
      }

      &-showEye {
        cursor: pointer;
      }

      &-forgetPsw {
        text-align: right;
        cursor: pointer;
      }

      &-login {
        width: 100%;
      }

      &-register {
        width: 100%;
        background-color: white;
      }
    }

    &-footer {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
